<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Presets Scoring Comparison</title>
    <style>
        body{
            font-family: sans-serif;
        }
        table td{
            padding: 1em 2em;
        }
    </style>
</head>
<body>
<h2>Presets Scoring Comparison</h2>
<h4>Indexed Text: "Gulliver's Travels" (Swift Jonathan 1726)</h4>
<hr>
<script src="../dist/flexsearch.min.js"></script>
<script src="../data/gulliver.js"></script>
<div id="container">
    <table>
        <tr>
            <th><b>Query</b></th>
            <th>default</th>
            <th>memory</th>
            <th>speed</th>
            <th>match</th>
            <th>score</th>
            <th>balance</th>
            <th>fast</th>
        </tr>
        <tr id="test-1">
            <td style="width: 200px">"without breach of modesty"</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
        </tr>
        <tr id="test-2">
            <td>"went softly stream"</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
        </tr>
        <tr id="test-3">
            <td>"princes of the ambition"</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
        </tr>
        <tr id="test-4">
            <td>"five-thousand leagues"</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
        </tr>
        <tr id="test-5">
            <td>"i already observed"</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
        </tr>
        <tr id="test-6">
            <td>"let a of his"</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
        </tr>
        <tr id="test-7">
            <td>"take that to the rocks"</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
        </tr>
        <tr id="test-8">
            <td>"bignes of splaknuk"</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
        </tr>
        <tr id="test-9">
            <td>"matematikal musikal instruments"</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
        </tr>
        <tr id="test-10">
            <td>"matical sical strument"</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
        </tr>
        <tr id="test-11">
            <td>"lalkon the camberlayhn"</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
            <td>wait ...</td>
        </tr>
    </table>
</div>
<hr>
<div style="line-height: 2em">
    <div style="display:inline-block; width:16px; height:16px; background: #f00"></div> Either no results or relevant content was not included in results.<br>
    <div style="display:inline-block; width:16px; height:16px; background: orange"></div> Most relevant results was not found in the first place.<br>
    <div style="display:inline-block; width:16px; height:16px; background: #0a0"></div> Most relevant results was successfully found in the first place.<br>
    <b>Note:</b> Open console and type e.g. <i>data[493]</i>
</div>
<script>

    var data = [];

    setTimeout(function(){

        var new_data = text_data;
        var tmp = '';

        for(var i = 0; i < new_data.length; i++){

            if(new_data[i].length > 2) {

                tmp += new_data[i] + '. ';

                if((tmp.length > 1000) || (i === new_data.length - 1)){

                    data.push(tmp.replace(/{[^}]*}/g, ''));
                    tmp = '';
                }
            }
        }

        var flexsearch_default = new FlexSearch();
        var flexsearch_memory = new FlexSearch("memory");
        var flexsearch_speed = new FlexSearch("speed");
        var flexsearch_fast = new FlexSearch("fast");
        var flexsearch_match = new FlexSearch("match");
        var flexsearch_score = new FlexSearch("score");
        var flexsearch_balance = new FlexSearch("balance");

        // ---------------------------------------

        console.time('flexsearch_default');

        for(var i = 0; i < data.length; i++){
            flexsearch_default.add(i, data[i]);
        }

        console.timeEnd('flexsearch_default');

        // ---------------------------------------

        console.time('flexsearch_memory');

        for(var i = 0; i < data.length; i++){
            flexsearch_memory.add(i, data[i]);
        }

        console.timeEnd('flexsearch_memory');

        // ---------------------------------------

        console.time('flexsearch_speed');

        for(var i = 0; i < data.length; i++){
            flexsearch_speed.add(i, data[i]);
        }

        console.timeEnd('flexsearch_speed');

        // ---------------------------------------

        console.time('flexsearch_match');

        for(var i = 0; i < data.length; i++){
            flexsearch_match.add(i, data[i]);
        }

        console.timeEnd('flexsearch_match');

        // ---------------------------------------

        console.time('flexsearch_score');

        for(var i = 0; i < data.length; i++){
            flexsearch_score.add(i, data[i]);
        }

        console.timeEnd('flexsearch_score');

        // ---------------------------------------

        console.time('flexsearch_balance');

        for(var i = 0; i < data.length; i++){
            flexsearch_balance.add(i, data[i]);
        }

        console.timeEnd('flexsearch_balance');

        // ---------------------------------------

        console.time('flexsearch_fast');

        for(var i = 0; i < data.length; i++){
            flexsearch_fast.add(i, data[i]);
        }

        console.timeEnd('flexsearch_fast');

        // ---------------------------------------

        do_test('test-1', 'without breach of modesty', [493]);
        do_test('test-2', 'went softly stream', [446]);
        do_test('test-3', 'princes of the ambition', [72, 408]);
        do_test('test-4', 'five-thousand leagues', [2]);
        do_test('test-5', 'i already observed', [458, 346]);
        do_test('test-6', 'let a of his', [50]);
        do_test('test-7', 'take that to the rocks', [175]);
        do_test('test-8', 'bignes of splaknuk', [146]);
        do_test('test-9', 'matematikal musikal instruments', [267]);
        do_test('test-10', 'matical sical strument', [267]);
        do_test('test-11', 'lalkon the camberlayhn', [99]);

        // ---------------------------------------

        function do_test(id, query, ref){

            var nodes = document.getElementById(id).getElementsByTagName('td');

            for(var i = 1; i < nodes.length; i++){

                var results;

                switch(i){

                    case 1:
                        results = flexsearch_default.search(query);
                        break;

                    case 2:
                        results = flexsearch_memory.search(query);
                        break;

                    case 3:
                        results = flexsearch_speed.search(query);
                        break;

                    case 4:
                        results = flexsearch_match.search(query);
                        break;

                    case 5:
                        results = flexsearch_score.search(query);
                        break;

                    case 6:
                        results = flexsearch_balance.search(query);
                        break;

                    case 7:
                        results = flexsearch_fast.search(query);
                        break;
                }

                for(var a = 0; a < ref.length; a++){

                    var current = ref[a];

                    nodes[i].innerHTML = results[0] || '-';
                    nodes[i].style.color = '#fff';

                    if((results[0] === current) || (results[0] === String(current))){

                        nodes[i].style.backgroundColor = '#0a0';
                        break;
                    }
                    else if(!results.length || ((results.indexOf(current) === -1) && (results.indexOf(String(current)) === -1))){

                        if(nodes[i].style.backgroundColor !== 'orange'){

                            nodes[i].style.backgroundColor = '#f00';
                        }
                    }
                    else{

                        nodes[i].style.backgroundColor = 'orange';
                    }
                }
            }
        }

    }, 50);

</script>
</body>
</html>
